<template>
	<cl-dialog
		title="常见问题"
		width="900px"
		:visible.sync="visible"
		@close="close"
		:props="{
			top: '5vh',
			'append-to-body': true
		}"
	>
		<div ref="scroller" class="body">
			<template v-for="(item, idx) in helps">
				<div :key="idx" :id="`step${idx + 1}`">
					<h3 style="margin-top: 0">
						<img src="@/assets/img/help/help_cover.png" />
						{{ idx + 1 }}、{{ item.title }}
					</h3>
					<div class="content">
						<div
							v-for="(subItem, subIdx) in item.content"
							:key="'step-' + idx + '-' + subIdx"
							class="mb-2"
						>
							<p :id="`step${idx + 1}-${subIdx + 1}`">
								{{ idx + 1 }}-{{ subIdx + 1 }}、<span v-html="subItem.title"></span>
							</p>
							<el-row type="flex" v-if="subItem.imgjoin">
								<cl-flex1 v-for="(img, imgIdx) in subItem.img" :key="imgIdx">
									<el-image
										style="margin-bottom: 0;"
										:src="img"
										:preview-src-list="images"
									/>
								</cl-flex1>
							</el-row>
							<template v-else>
								<el-image
									v-for="(img, imgIdx) in subItem.img"
									:key="imgIdx"
									:src="img"
									:preview-src-list="images"
								/>
							</template>
						</div>
					</div>
				</div>
			</template>
			<!--
			<h3>
				<img src="@/assets/img/help/help_cover.png" />
				4、如何获取客户管理Secret
			</h3>
			<div class="content">
				<p>
					1、点击企业微信管理后台“客户联系”，然后点击“API”，点击“查看”按钮，将Secret发送到企业微信
				</p>
				<img src="@/assets/img/help/4-1.png" />
				<p>
					2、手机打开企业微信，在企业微信团队的对话列表中查看客户联系Secret并复制<a
						href="#step3-3"
						class="color-primary"
						>（同步骤3-3）</a
					>
				</p>
				<el-row type="flex">
					<cl-flex1><img src="@/assets/img/help/3-4.png"/></cl-flex1>
					<cl-flex1><img src="@/assets/img/help/3-5.png"/></cl-flex1>
				</el-row>
				<p>
					3、将复制好的“客户管理Sercret”黏贴到这里
				</p>
				<img src="@/assets/img/help/4-2.png" />
			</div> -->
		</div>
	</cl-dialog>
</template>
<script>
export default {
	props: {
		helps: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			visible: false,
			// helps: [
			// 	{
			// 		title: "如何获取青鸟线索ID",
			// 		content: [
			// 			{
			// 				title: `打开浏览器，在地址栏输入企业微信官网地址：<a href="https://work.weixin.qq.com">https://work.weixin.qq.com</a>`,
			// 				img: [require(`@/assets/img/help/1-1.png`)]
			// 			},
			// 			{
			// 				title: `然后扫描二维码进入企业微信管理后台`,
			// 				img: [require(`@/assets/img/help/1-2.png`)]
			// 			}
			// 		]
			// 	},
			// 	{
			// 		title: "如何获取企业ID",
			// 		content: [
			// 			{
			// 				title: `进入企业微信管理后台，点击右上角“我的企业”，在企业信息最后一行找到并复制“企业ID”`,
			// 				img: [require(`@/assets/img/help/2-1.png`)]
			// 			},
			// 			{
			// 				title: `将复制好的“企业ID”粘贴到这里`,
			// 				img: [require(`@/assets/img/help/2-2.png`)]
			// 			}
			// 		]
			// 	},
			// 	{
			// 		title: "如何获取通讯录Secret",
			// 		content: [
			// 			{
			// 				title: `点击企业微信管理后台“管理工具”，然后点击“通讯录同步”`,
			// 				img: [require(`@/assets/img/help/3-1.png`)]
			// 			},
			// 			{
			// 				title: `点击“查看”按钮，将Secret发送到企业微信`,
			// 				img: [
			// 					require(`@/assets/img/help/3-2.png`),
			// 					require(`@/assets/img/help/3-3.png`)
			// 				]
			// 			},
			// 			{
			// 				title: `手机打开企业微信，在企业微信团队的对话列表中查看企业Secret并复制`,
			// 				img: [
			// 					require(`@/assets/img/help/3-4.png`),
			// 					require(`@/assets/img/help/3-5.png`)
			// 				],
			// 				imgjoin: true
			// 			},
			// 			{
			// 				title: `将复制好的“通讯录Sercret”黏贴到这里`,
			// 				img: [require(`@/assets/img/help/3-6.png`)]
			// 			}
			// 		]
			// 	},
			// 	{
			// 		title: "如何获取客户管理Secret",
			// 		content: [
			// 			{
			// 				title: `点击企业微信管理后台“客户联系”，然后点击“API”，点击“查看”按钮，将Secret发送到企业微信`,
			// 				img: [require(`@/assets/img/help/4-1.png`)]
			// 			},
			// 			{
			// 				title: `手机打开企业微信，在企业微信团队的对话列表中查看客户联系Secret并复制<a href="#step3-3">（同步骤3-3）</a>`,
			// 				img: []
			// 				// img: ["3-4.png", "3-5.png"],
			// 				// imgjoin: true
			// 			},
			// 			{
			// 				title: `将复制好的“客户管理Sercret”黏贴到这里`,
			// 				img: [require(`@/assets/img/help/4-2.png`)]
			// 			}
			// 		]
			// 	},
			// 	{
			// 		title: "如何设置客户管理回调URL",
			// 		content: [
			// 			{
			// 				title: `点击企业微信管理后台“客户联系”，然后点击“API”，找到接收事件服务器，点击“设置”或“编辑”`,
			// 				img: [require(`@/assets/img/help/5-1.png`)]
			// 			},
			// 			{
			// 				title: `在集团CRM系统后台复制“客户管理回调URL”`,
			// 				img: [require(`@/assets/img/help/5-2.png`)]
			// 			},
			// 			{
			// 				title: `找到“URL”输入框，将复制好的“客户管理回调URL”粘贴到这里`,
			// 				img: [require(`@/assets/img/help/5-3.png`)]
			// 			}
			// 		]
			// 	},
			// 	{
			// 		title: "如何设置客户管理回调Token",
			// 		content: [
			// 			{
			// 				title: `在集团CRM系统后台随机生成并复制“客户管理回调Token”`,
			// 				img: [require(`@/assets/img/help/6-1.png`)]
			// 			},
			// 			{
			// 				title: `找到“Token”输入框，将复制好的“客户管理回调Token”粘贴到这里`,
			// 				img: [require(`@/assets/img/help/6-2.png`)]
			// 			}
			// 		]
			// 	},
			// 	{
			// 		title: "如何设置客户管理回调EncodingAESKey",
			// 		content: [
			// 			{
			// 				title: `在集团CRM系统后台随机生成并复制“客户管理回调EncodingAESKey”`,
			// 				img: [require(`@/assets/img/help/7-1.png`)]
			// 			},
			// 			{
			// 				title: `找到“EncodingAESKey”输入框，将复制好的“客户管理回调EncodingAESKey”粘贴到这里`,
			// 				img: [require(`@/assets/img/help/7-2.png`)]
			// 			},
			// 			{
			// 				title: `确认“URL”、“Token”、“EncodingAESKey”全部填写完毕，点击“保存”`,
			// 				img: [require(`@/assets/img/help/7-3.png`)]
			// 			}
			// 		]
			// 	},
			// 	{
			// 		title: "如何自建应用",
			// 		content: [
			// 			{
			// 				title: `点击企业微信管理后台“应用管理”，找到“自建”，点击“创建应用”`,
			// 				img: [require(`@/assets/img/help/8-1.png`)]
			// 			},
			// 			{
			// 				title: `找到并复制自建应用“AgentId”`,
			// 				img: [
			// 					require(`@/assets/img/help/8-2.png`),
			// 					require(`@/assets/img/help/8-3.png`)
			// 				]
			// 			},
			// 			{
			// 				title: `将复制好的自建应用“AgentId”粘贴到这里`,
			// 				img: [require(`@/assets/img/help/8-4.png`)]
			// 			}
			// 		]
			// 	},
			// 	{
			// 		title: "如何获取自建应用Secret",
			// 		content: [
			// 			{
			// 				title: `点击“查看”按钮，将自建应用Secret发送到企业微信`,
			// 				img: [
			// 					require(`@/assets/img/help/9-1.png`),
			// 					require(`@/assets/img/help/9-2.png`)
			// 				]
			// 			},
			// 			{
			// 				title: `手机打开企业微信，在企业微信团队的对话列表中查看自建应用Secret并复制<a href="#step3-3">（同步骤3-3）</a>`,
			// 				img: []
			// 			},
			// 			{
			// 				title: `将复制好的“自建应用Sercret”黏贴到这里`,
			// 				img: [require(`@/assets/img/help/9-3.png`)]
			// 			}
			// 		]
			// 	},
			// 	{
			// 		title: "如何配置授权登录回调域",
			// 		content: [
			// 			{
			// 				title: `复制配置栏的授权登录回调域`,
			// 				img: [require(`@/assets/img/help/10-1.png`)]
			// 			},
			// 			{
			// 				title: `点击自建应用，找到企业微信授权登录，点击设置按钮进入设置页面`,
			// 				img: [require(`@/assets/img/help/10-2.png`)]
			// 			},
			// 			{
			// 				title: `点击web网页下方的设置授权回调域，将复制的回调域粘贴至填写栏，点击保存完成配置`,
			// 				img: [
			// 					require(`@/assets/img/help/10-3.png`),
			// 					require(`@/assets/img/help/10-4.png`)
			// 				]
			// 			}
			// 		]
			// 	},
			// 	{
			// 		title: "如何获取公众号Appld",
			// 		content: [
			// 			{
			// 				title: `登录公众号平台(<a href="https://mp.weixin.qq.com">https://mp.weixin.qq.com</a>)`,
			// 				img: [require(`@/assets/img/help/11-1.png`)]
			// 			},
			// 			{
			// 				title: `点击菜单“基本配置”，复制“AppID”`,
			// 				img: [require(`@/assets/img/help/11-2.png`)]
			// 			},
			// 			{
			// 				title: `将复制好的“AppID”粘贴到这里`,
			// 				img: [require(`@/assets/img/help/11-3.png`)]
			// 			}
			// 		]
			// 	},
			// 	{
			// 		title: "如何获取公众号AppSecret",
			// 		content: [
			// 			{
			// 				title: `登录公众号平台(<a href="https://mp.weixin.qq.com">https://mp.weixin.qq.com</a>)`,
			// 				img: [require(`@/assets/img/help/12-1.png`)]
			// 			},
			// 			{
			// 				title: `2.点击菜单“基本配置”，在开发者秘钥项点击重置/启用按钮，按照步骤操作查看并复制AppSecret`,
			// 				img: [
			// 					require(`@/assets/img/help/12-2.png`),
			// 					require(`@/assets/img/help/12-3.png`),
			// 					require(`@/assets/img/help/12-4.png`)
			// 				]
			// 			},
			// 			{
			// 				title: `将复制好的“AppSecret”粘贴到这里`,
			// 				img: [require(`@/assets/img/help/12-5.png`)]
			// 			}
			// 		]
			// 	}
			// ],
			index: 1
		};
	},
	computed: {
		images() {
			return this.helps.reduce((prev, curr) => {
				let images = curr.content.map(v => v.img);
				return prev.concat(...images);
			}, []);
		}
	},
	methods: {
		open(index) {
			this.index = index;
			this.visible = true;
			this.$nextTick(() => {
				let scroller = this.$refs.scroller;
				let elStep = document.getElementById("step" + this.index);
				setTimeout(() => {
					scroller.scrollTop = elStep.offsetTop - 70;
				}, 100);
			});
		},
		close() {}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-dialog {
		&__body {
			box-sizing: border-box;
			padding: 10px;
			max-height: none;
		}
		&.is-fullscreen {
			.body {
				height: calc(100vh - 75px);
			}
		}
	}
}

.body {
	box-sizing: border-box;
	padding: 10px;
	width: 100%;
	height: 80vh;
	overflow: auto;
	&::-webkit-scrollbar {
		width: 5px;
		height: 5px;
	}
	h3 {
		position: relative;
		width: 100%;
		display: flex;
		align-items: center;
		margin: 50px auto 0;
		font-size: 20px;
		color: #333;
		img {
			display: inline-block;
			width: 30px;
			margin: 0px;
			margin-right: 20px;
			margin-left: 0px;
		}
	}
	.content {
		padding-left: 45px;
		padding-top: 15px;
		box-sizing: border-box;
		position: relative;
		&::before {
			position: absolute;
			content: "";
			top: 0;
			left: 14px;
			width: 0;
			border-left: 2px dashed #ccc;
			height: 100%;
		}
		::v-deep a {
			color: $primary;
		}
		p {
			position: relative;
			top: 0;
			left: 0;
			width: 100%;
			font-size: 14px;
			font-weight: 400;
			color: #333333;
			line-height: 28px;
			box-sizing: border-box;
			user-select: text;
			&::before {
				position: absolute;
				content: "";
				top: 50%;
				left: -25px;
				width: 20px;
				transform: translate(0, -50%);
				height: 0;
				border-top: 2px dashed #ccc;
			}
		}
		img {
			box-sizing: border-box;
			width: 100%;
			display: block;
			cursor: pointer;
			margin: 20px 0;
		}
	}
}
</style>
